<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="image/logo2.jpg" alt="">
    <div class="title">我的博客系统</div>
    <div class="spacer"></div>
    <a href="blog_list.jsp">主页</a>
    <a href="blog_edit.jsp">写博客</a>
    <a href="logout">注销</a>
</div>

<!-- 页面主体部分 -->
<div class="container">
    <!-- 左侧用户信息 -->
    <div class="container-left">
        <div class="card">
            <img src="image/kun.jpg" alt="">
            <h3></h3>
            <a href="https://www.github.com">github 地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>
            </div>
        </div>
    </div>

    <!-- 右侧博客列表 -->
    <div class="container-right">
        <!-- 动态生成博客内容 -->
    </div>
</div>

<script src="js/app.js"></script>
<script>
    // 获取博客列表并展示
    function getBlogs() {
        $.ajax({
            type: 'get',
            url: 'blog',  // 获取博客列表接口
            success: function(body) {
                let containerDiv = document.querySelector('.container-right');
                for (let i = 0; i < body.length; i++) {
                    let blog = body[i];

                    // 创建博客元素
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';

                    // 标题
                    let titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = blog.title;

                    // 发布时间
                    let dateDiv = document.createElement('div');
                    dateDiv.className = 'date';
                    dateDiv.innerHTML = blog.postTime;

                    // 摘要
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.content;

                    // 查看全文按钮
                    let a = document.createElement("a");
                    a.innerHTML = '查看全文 &gt;&gt;';
                    a.href = '/blog/admin/blog_detail.jsp?blogId=' + blog.blogId;

                    // 删除按钮
                    let deleteBtn = document.createElement("a");

                    deleteBtn.className = 'delete-btn';
                    deleteBtn.innerHTML = '删除';
                    deleteBtn.onclick = function() {
                        deleteBlog(blog.blogId);
                    };

                    // 组装博客内容
                    blogDiv.appendChild(titleDiv);
                    blogDiv.appendChild(dateDiv);
                    blogDiv.appendChild(descDiv);
                    blogDiv.appendChild(a);
                    blogDiv.appendChild(deleteBtn); // 添加删除按钮

                    // 将博客添加到页面中
                    containerDiv.appendChild(blogDiv);
                }
            }
        });
    }

    // 删除博客
    function deleteBlog(blogId) {
        if (confirm("确定要删除这篇博客吗？")) {
            $.ajax({
                type: 'post',
                url: '/blog/deleteBlog',  // 后端删除接口
                data: { blogId: blogId },
                success: function(response) {
                    if (response.success) {
                        alert("博客删除成功！");
                        location.reload();  // 删除成功后刷新页面
                    } else {
                        alert("删除失败：" + response.message);
                    }
                },
                error: function() {
                    alert("请求失败，请稍后再试！");
                }
            });
        }
    }

    // 获取博客列表
    getBlogs();

    // 获取当前登录用户信息
    function getUserInfo() {
        $.ajax({
            type: 'get',
            url: '/blog/userInfo',
            success: function(user) {
                let h3 = document.querySelector('.card h3');
                h3.innerHTML = user.username;
            }
        });
    }

    getUserInfo();
</script>
</body>
</html>
